<template>
  <div id="app">
    <h2>------------------App内容，modules中的内容-------------------</h2>
    <h2>{{$store.state.a}}</h2>
    <h2>{{$store.state.a.name}}</h2>
    <button @click="updatename">修改名字</button>

    <h2>调用getter中的fullname----{{$store.getters.fullname}}</h2>
    <h2>对fullname1进行拼接-----{{$store.getters.fullname2}}</h2>
    <h2>拼接fullname2和state中的counter-----{{$store.getters.fullname3}}</h2>

    <button @click="asyncupdatename">在模块中异步修改名字</button>


    <h2>------------------App内容-------------------</h2>
    <h2>{{message}}</h2>
    <h2>{{$store.state.counter}}</h2>
    <button @click="addition">+</button>
    <button @click="subtraction">-</button>
    <button @click="addcount(5)">+5</button>
    <button @click="addcount(10)">+10</button>
    <button @click="addstudent">添加学生</button>
    <h2>{{$store.state.students}}</h2>


    <h2>------------------App内容：info对象的内容是否是响应式的-------------------</h2>
    <h2>{{$store.state.info}}</h2>
    <button @click="updateinfo">修改信息</button>




    <h2>------------------App内容：Getters的相关内容-------------------</h2>
    <h2>{{$store.getters.powerCounter}}</h2>
    //获取年龄大于20的学生的数组
    <h2>{{more20stu}}</h2>
    <h2>{{$store.getters.more20stu}}</h2>
    //获取年龄大于20岁的学生的人数
    <h2>{{$store.getters.more20stu.length}}</h2>
    <h2>{{$store.getters.more20stuLength}}</h2>
    //根据用户输入的数据，筛选大于20岁的学生
    <h2>{{$store.getters.moreAgeStu(30)}}</h2>


    <h2>------------------Hello vuex内容-------------------</h2>
    <hello-vuex></hello-vuex>
  </div>
</template>

<script>
  import HelloVuex from "./components/HelloVuex";
  import {
    INCREMENT
  }from "./store/Mutations-types"

  export default {
    name: 'App',
    components:{
      HelloVuex
    },
    data(){
      return{
        message:'我是App内容',
      }
    },
    methods:{
      addition(){
        this.$store.commit(INCREMENT)
      },
      subtraction(){
        this.$store.commit('decrement')
      },
      addcount(count){
        //1.普通的提交风格
        // this.$store.commit('incrementcount',count)

        // 2.特殊的提交封装
        this.$store.commit({
          type:'incrementcount',
          count,
        })
      },
      addstudent(){
        const stu = {id:104, name:'pikaqiu',age:666}
        this.$store.commit('addStudent',stu)
      },
      //做法一：
      // updateinfo(){
      //   // this.$store.commit('updateinfo')
      //   this.$store.dispatch('actionupdateinfo', {
      //     message:'我是携带的信息',
      //     success: () => {
      //       console.log('里面已经完成了')
      //     }
      //   })
      // },
      //做法二：
      updateinfo(){
      this.$store.dispatch('actionupdateinfo','我是携带的信息')
        .then(res => {
          console.log('里面完成了提交')
          console.log(res)
        })
      },

      updatename(){
        this.$store.commit('updatename','lisi')
      },
      asyncupdatename(){
        this.$store.dispatch('aupdatename')
      }
    },
    computed:{
      more20stu(){
        return this.$store.state.students.filter(s => s.age >= 20)
      }
    }
  }
</script>

<style>

</style>
